<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-input v-model="select_word" style="width: 300px" placeholder="请输入查询关键字" ></el-input>
        <el-button  icon="search"  plain  @click="search">搜索</el-button>
        <el-button @click="adduser = true">添加用户</el-button>
        <div style="margin-top: 20px"></div>
        <el-table  :data="tableData"  style="width: 100%">
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column property="username" label="用户名"></el-table-column>
            <el-table-column property="user_id" label="id"></el-table-column>
            <el-table-column property="roles1" label="所属角色"></el-table-column>
            <el-table-column property="phone" label="电话"></el-table-column>
            <el-table-column property="email" label="邮箱"></el-table-column>
            <el-table-column property="create_time" label="创建时间"></el-table-column>
            <el-table-column label="操作" width="300">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="danger"
                        icon="delete"
                        @click="delOne(scope.$index, scope.row)">删除</el-button>
                    <el-button
                        size="mini"
                        type="primary"
                        icon="plus"
                        @click="associatedRole(scope.$index, scope.row)">关联角色</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="pageNum"
            :page-size="15"
            layout="prev, pager, next, jumper"
            :total="count">
        </el-pagination>
        <el-dialog title="关联角色" :visible.sync="associatedroleVis"  size="small" @close="clearall">
            <el-checkbox-group v-model="checkedCities">
                <el-checkbox @change="handleCheckedCitiesChange" v-for="item in checked" :label="item.role_id" :key="item.role_id">{{item.description}}</el-checkbox>
            </el-checkbox-group>
            <div  style="margin-top: 30px;left: 85%;position: relative">
                <el-button type="primary" @click="handassociated()">立即分配</el-button></div>
        </el-dialog>
        <el-dialog title="添加用户" :visible.sync="adduser">
            <el-form :model="ruleForm" :rules="rules"  ref="ruleForm" label-width="100px">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="ruleForm.username" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="ruleForm.password" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="ruleForm.name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input v-model="ruleForm.phone" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="ruleForm.email" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                userId:'',
                roleId1:[],
                checkedCities: [],
                checked: [{
                    description:'',
                    role_id:''
                }],

                updateuser:false,
                associatedroleVis:false,
                adduser:false,
                select_word:'',
                pageNum:1,
                count:0,
                count1:0,
                ruleForm:{
                    username:'',
                    password:'',
                    name:'',
                    phone:'',
                    email:'',
                },
                form1:{
                    username:'',
                    user_id:'',
                    role_id:'',
                    description:'',
                    phone:'',
                    email:'',
                    create_time:'',
                    updata_time:''
                },
                tableData: [{
                    username:'',
                    user_id:'',
                    roles1:'',
                    roles:[{
                        description:'',
                        role_id:''
                    }],
                    phone:'',
                    email:'',
                    create_time:'',
                }],
                multipleSelection: [],
                rules: {
                    username: [
                        { required: true, message: '请输入上报人名字', trigger: 'blur' },
                    ],
                    password: [
                        { required: true, message: '请输入其他备注', trigger: 'blur' },
                    ],
                    name: [
                        { required: true, message: '请输入其他备注', trigger: 'blur' },
                    ],
                    phone: [
                        { required: true, message: '请输入其他备注', trigger: 'blur' },
                    ],
                    email: [
                        { required: true, message: '请输入其他备注', trigger: 'blur' },
                    ],
                }
            }
        },
        created(){
            this.getData();
            this.getRole();
        },
        methods: {
            getData(){
                this.$axios.get('text/user/findAll?pageNum=1').then((res) => {
                    if(res.data.code==403){
                        this.$router.push('/login');
                    }
                    this.count= res.data.data.total;
                    this.tableData= res.data.data.list;

                    var tArray = new Array();  //先声明一维
                    for(var i=0;i<this.tableData.length;i++)
                    {
                        var a=" ";
                        for(var j=0;j<this.tableData[i].roles.length;j++)
                        {
                            a=a+this.tableData[i].roles[j].description+"  ";
                            tArray.push(this.tableData[i].roles[j]);
                            console.log(this.tableData[i].roles[j]);
                        }
                        this.tableData[i].roles1=a
                    }
                    console.log(tArray);

                })
            },

            text(){
                console.log(this.checked);
            },
            getRole(){
                this.$axios.get('/text/role/findAllRole').then((res)=>{
                    this.checked=res.data.data
                })
            },
            search(select_word){
                this.page=false;
                this.$axios.get('text/user/queryfuzzy?pageNum=1'+'&keyword='+this.select_word).then((res) => {
                    this.tableData= res.data.data.list;
                    this.count1=res.data.data.total
                })
            },

            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios.post('text/user/createUser?' +
                            "&username="+ this.ruleForm.username+
                            "&password=" + this.ruleForm.password+
                            "&name=" + this.ruleForm.name+
                            "&phone=" + this.ruleForm.phone+
                            "&email="+ this.ruleForm.email
                        ).then((res) => {
                            this.getData();
                            this.adduser=false
                            this.$message.info('添加成功');
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            associatedRole(index, row) {
                this.associatedroleVis=true;
                this.userId=row.user_id;
                console.log(this.checked.length);
                var Roles=new Array();
                for(var i=0;i<row.roles.length;i++)
                {
                    Roles.push(row.roles[i].role_id);

                    for(var j=0;j<this.checked.length;j++) {
                        // console.log(this.checked[j].role_id);
                        // console.log(row.roles[i].role_id);

                        if (this.checked[j].role_id == row.roles[i].role_id)
                        {
                            this.checkedCities.push(this.checked[j].role_id);
                        }

                    }

                }
                console.log(this.checkedCities)
            },
            handleCheckedCitiesChange() {
                console.log(this.checkedCities)
                // for(var i=0;i<this.checkedCities.length;i++)
                //     console.log(this.checkedCities[i])
                for(var i=0;i<this.checkedCities.length;i++)
                {
                    console.log(this.checkedCities[i])
                }

            },
            handassociated(){
                var json = [];
                for (var i = 0; i<this.checkedCities.length; i++) {
                    var j = {};
                    j.roleId = this.checkedCities[i];
                    j.userId =this.userId;
                    json.push(j);
                }   console.log(json);
                var a = JSON.stringify(json);
                console.log(a);
                this.$axios({
                    method:"POST",
                    url:'text/user/correlationRoles',
                    dataType:'json',
                    data:json,
                }).then((res)=>{
                    if(res.data.code==200){
                        this.getData();
                        this.associatedroleVis=false;
                    }
                })
            },
            clearall(){
                this.checkedCities.splice(0,this.checkedCities.length);
            },
            addUser(){
                this.$axios.post('text/user/createUser?'+
                    'username='+this.form.username+
                    '&password='+this.form.password
                ).then((res)=>{

                })
            },
            delOne(index, row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.delete('text/user/deleteUser?' +
                        'userId=' + row.user_id
                    ).then((res) => {
                        this.getData(),
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(pageNum) {
                this.$axios.get('/text/user/findAll?pageNum='+pageNum).then((res) => {
                    this.tableData= res.data.data.list;
                })
            },
        }
    }
</script>

<style scoped>
    .crumbs{
        margin-bottom: 20px;
    }
</style>
